<!--
 * @Author: 毕晨曦 
 * @Date: 2024-12-07 20:35:18
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-12-08 09:55:09
 * @FilePath: /xing-fu-da-zi-weapp/src/components/head-popup/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <u-popup :show="show" @close="emit('close')" :mode="'center'">
    <view class="conatiner">
      <u-subsection
        :list="shouList"
        :current="shouCurrent"
        @change="sectionChange"
        :fontSize="24"
        :activeColor="'#81d8d0'"
      ></u-subsection>
      <view class="content">
        <view class="item">
          <image
            src="https://hunlianjiaxiao.cn/img/love/2024-12-8/1835875058821087233-1733616895010001.jpg"
            style="width: 200rpx; height: 200rpx; border-radius: 50%"
          ></image>
        </view>
        <view class="item">
          <image
            src="https://hunlianjiaxiao.cn/img/love/2024-12-8/1835875058821087233-1733616922010001.jpg"
            style="width: 200rpx; height: 200rpx; border-radius: 50%"
          ></image>
        </view>
      </view>
      <u-subsection
        :list="shouBiList"
        :current="shouBiCurrent"
        @change="sectionChangeBi"
        :fontSize="24"
        :active-color="'#81d8d0'"
      ></u-subsection>
      <view class="content">
        <view class="item">
          <image
            src="https://hunlianjiaxiao.cn/img/love/2024-12-8/1835875058821087233-1733617094010001.jpg"
            style="width: 200rpx; height: 200rpx; border-radius: 50%"
          ></image>
        </view>
        <view class="item">
          <image
            src="https://hunlianjiaxiao.cn/img/love/2024-12-8/1835875058821087233-1733617114010001.jpg"
            style="width: 200rpx; height: 200rpx; border-radius: 50%"
          ></image>
        </view>
      </view>
      <view class="btn-content">
        <u-button text="确定" color="#81d8d0" @click="save"></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue";

defineProps({
  show: Boolean,
});

const emit = defineEmits(["close", "setHead"]);

const shouList = ref(["左手", "右手"]);
const shouCurrent = ref(0);
function sectionChange(index) {
  shouCurrent.value = index;
}

const shouBiList = ref(["左臂", "右臂"]);
const shouBiCurrent = ref(0);
function sectionChangeBi(index) {
  shouBiCurrent.value = index;
}

function save() {
  const show = shouCurrent.value === 0 ? "L" : "R";
  const showBi = shouBiCurrent.value === 0 ? "L" : "R";
  emit("setHead", show + showBi);
}
</script>

<style lang="scss">
.conatiner {
  width: 600rpx;
  height: 800rpx;
  padding: 30rpx;
}

.content {
  display: flex;
  width: 100%;
  height: 260rpx;
  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.btn-content {
  padding: 30rpx;
}
</style>
